
// 调用鉴权函数
checkLogin()

    // 退出登录
    logout()
    // 调用用户名
    renderUser()

const modalDom=document.querySelector('.modal')
const modal=new bootstrap.Modal(modalDom)

// document.querySelector('#openModal').addEventListener('click',function(){
//     // 显示模态框
//     modal.show()
// })
// modalDom.addEventListener('shown.bs.modal', () => {
//    显示
//   })
// modalDom.addEventListener('shown.bs.modal', () => {
//    隐藏
//   })


// 数据增删改查
const list=document.querySelector('.list')
async function render(){
const {data}=await axios.get('/students')
// console.log(res);
document.querySelector('.total').innerHTML=data.length
list.innerHTML=data.map(item=>{
    // console.log(item);
    
    return`
    <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender?'女':'男'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
        </td>
    </tr>
    `
}).join('')

}

render()
// 定义标识
let rowId
// 添加业务
document.querySelector('#openModal').addEventListener('click',function(){
   rowId=null
   modal.show() 

})
// 编辑业务
list.addEventListener('click',async function (e) {
    if(e.target.classList.contains('bi-pen')){
        rowId=e.target.dataset.id
        const {data}=await axios.get(`/students/${rowId}`)
        // console.log(data);
        const resArr=['name','age','gender','group','salary','hope_salary']
        resArr.forEach(item=>{
        document.querySelector(`[name=${item}]`).value=data[item]
        })

        const genders=document.querySelectorAll('[name=gender')
        genders[data.gender].checked=true

        // 回显省份
        const{province,city,area}=data
        proSelect.value=province
        const{list:list1}=await axios.get(`/api/city?pname=${province}`)
        const html2=list1.map(item=>{
            return`
            <option value="${item}">${item}</option>
            `
        }).join('')
        citSelect.innerHTML=`<option >--城市--</option>`+html2
        
        const{list:list2}=await axios.get(`/api/area?pname=${province}&cname=${city}`)
        const html3=list2.map(item=>{
            return`
            <option value="${item}">${item}</option>
            `
        }).join('')
        areaSelect.innerHTML=`<option >--地区--</option>`+html3
        modal.show()
    }
    
    // 判断是否为删除按钮
    if(e.target.classList.contains('bi-trash')){
        const id=e.target.dataset.id
        const flag=confirm('确定删除吗？')
        if(flag){
            await axios.delete(`/students/${id}`)
            showToast('删除成功')
            render()
        }
    }
})
const form=document.querySelector('#form')
// 点击确定按钮
document.querySelector('#submit').addEventListener('click',async function(){
   if(rowId){
       // 编辑
       const data=serialize(form,{hash:true,empty:true})
       data.age=+data.age
       data.gender=+data.gender
       data.group=+data.group
       data.salary=+data.salary
       data.hope_salary=+data.hope_salary
       await axios.put(`/students/${rowId}`)
       showToast('编辑成功')
       render()
   }else{
    const data=serialize(form,{hash:true,empty:true})
    data.age=+data.age
    data.gender=+data.gender
    data.group=+data.group
    data.salary=+data.salary
    data.hope_salary=+data.hope_salary
    await axios.post(`/students,data`)
    showToast('添加成功')
    render()
   }
    modal.hide()
})


const proSelect=document.querySelector('[name="province"]')
const citSelect=document.querySelector('[name="city"]')
const areaSelect=document.querySelector('[name="area"]')
let p=''
// 初始化省市区
async function initSelect(){
    const {list}=await axios.get('/api/province')
    // console.log(res);
    
    const html1=list.map(item=>{
        return`
         <option value="${item}">${item}</option>
        `
    }).join('')
    proSelect.innerHTML=` <option value="">--省份--</option>`+html1

    proSelect.addEventListener('click',async function (e) {
        p=e.target.value
        const{list}=await axios.get(`/api/city?pname=${e.target.value}`)
        const html2=list.map(item=>{
            return`
              <option value="${item}">${item}</option>
            `
        }).join('')
        citSelect.innerHTML=`<option value="">--城市--</option>`+html2
        areaSelect.innerHTML=`<option value="">--地区--</option>`
    })
 
    citSelect.addEventListener('click',async function (e) {
     
        const{list}=await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
        const html2=list.map(item=>{
            return`
              <option value="${item}">${item}</option>
            `
        }).join('')
       areaSelect.innerHTML=`<option value="">--地区--</option>`+html2
        
    })
}
initSelect()

// 监听模态框

    
    // 监听标题修改

modalDom.addEventListener('shown.bs.modal', event => {
//    显示
document.querySelector('.modal-title').innerHTML=rowId? '编辑学生信息' : '添加学生信息'
  })
modalDom.addEventListener('hide.bs.modal', () => {
//    隐藏
form.reset()
  })